<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="border">
            <span style="font-size: 17px;font-weight: bold">短信设置详情</span>
          </div>
          <div style="padding:20px 60px 10px 120px">
            <el-row>
              <el-form
                inline
                label-position="right"
                class="demo-form-inline"
                label-width="155px"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="鸿联95网关:" prop="hl95Gateway">
                      <el-input
                        class="input_content"
                        placeholder="请输入鸿联95网关"
                        v-model="pageData.hl95Gateway"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="鸿联95用户名:" prop="hl95Username">
                      <el-input
                        class="input_content"
                        placeholder="请输入鸿联95用户名"
                        v-model="pageData.hl95Username"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="鸿联95短信密码:" prop="hl95Password">
                      <el-input
                        class="input_content"
                        placeholder="请输入鸿联95短信密码"
                        v-model="pageData.hl95Password"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="短信签名:" prop="sign">
                      <el-input
                        class="input_content"
                        placeholder="请输入短信签名"
                        v-model="pageData.sign"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="阿里短信钥匙Id:" prop="aliAccessKeyId">
                      <el-input
                        class="input_content"
                        placeholder="请输入阿里短信钥匙Id"
                        v-model="pageData.aliAccessKeyId"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="阿里短信钥匙秘钥:"
                      prop="aliAccessKeySecret"
                    >
                      <el-input
                        class="input_content"
                        placeholder="请输入阿里短信钥匙秘钥"
                        v-model="pageData.aliAccessKeySecret"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="短信开关:" prop="open">
                      <el-switch
                        style="margin-left: 10px"
                        v-model="pageData.open"
                        active-color="#13ce66"
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="true"
                        :inactive-value="false"
                      ></el-switch>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="短信通道:"  label-width="155px" prop="channel">
                      <el-select v-model="pageData.channel"  style="margin-left: 10px;width: 100%;" placeholder="请选择短信通道">
                        <el-option
                          v-for="item in channels"
                          :key="item.keyword"
                          :label="item.label"
                          :value="item.keyword">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="鸿联95企业ID:" prop="hl95EpId">
                      <el-input
                        class="input_content"
                        placeholder="请输入鸿联95企业ID"
                        v-model="pageData.hl95EpId"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="移动云mas平台网关:" prop="masGateway">
                      <el-input
                        class="input_content"
                        placeholder="请输入移动云mas平台网关"
                        v-model="pageData.masGateway"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="移动云mas平台登录名:"
                      prop="masUsername"
                    >
                      <el-input
                        class="input_content"
                        placeholder="请输入移动云mas平台登录名"
                        v-model="pageData.masUsername"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="移动云mas平台密码:" prop="masPassword">
                      <el-input
                        class="input_content"
                        placeholder="请输入移动云mas平台密码"
                        v-model="pageData.masPassword"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="移动云mas平台客户名:" prop="masEcName">
                      <el-input
                        class="input_content"
                        placeholder="请输入移动云mas平台客户名"
                        v-model="pageData.masEcName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="移动云mas平台签名:" prop="masSign">
                      <el-input
                        class="input_content"
                        placeholder="请输入移动云mas平台签名"
                        v-model="pageData.masSign"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <span
                      style="display: flex;justify-content: center;margin-right: 150px;margin-top: 30px;margin-bottom: 10px"
                    >
                      <el-button type="primary" @click="saveSetting"
                        >确定</el-button
                      >
                    </span>
                  </el-col>
                </el-row>
              </el-form>
            </el-row>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
export default {
  created() {
    this.getPageData();
  },
  data() {
    return {
      pageData: {},
      channels:this.getDictionary('SMS_CHANNEL')
    };
  },
  watch: {},
  methods: {
    getPageData() {
      this.API.getSmsSettingById({ id: 1 }).then(ret => {
        this.pageData = ret.data;
      });
    },
    saveSetting() {
      let tem = { body: this.pageData };
      this.API.addOrUpdateSmsSetting(tem).then(() => {
        this.$message({
          message: "保存成功",
          type: "success"
        });
      });
    }
  }
};
</script>
<style scoped>
/deep/ .el-card__body {
  padding: 0;
}

.border {
  padding: 19px 0 19px 20px;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
}

.input_content {
  float: left;
  width: 400px;
  height: auto;
  margin-right: 150px;
  margin-left: 10px;
  box-sizing: border-box;
  font-size: 14px;
  /*color: #666666;*/
  text-align: left;
  margin-bottom: 12px;
}

/deep/ .el-switch__label {
  color: #99b4ca;
}

/deep/ .el-switch__label.is-active {
  color: #409eff;
}
</style>
